<template>
  <div class="circuit">
    <div id="stencil" style="width: 300px"></div>
    <div id="container"></div>
    <div class="export">
      <el-form :model="rightData" label-width="50px">
        <el-form-item label="id:">
          <el-input v-model="rightData.ID" />
        </el-form-item>
        <el-form-item label="名称:">
          <el-input v-model="rightData.Name" />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" @click="toJSON">导出JSON</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" draggable>
      <el-form :model="formData">
        <el-form-item label="名称">
          <el-input v-model="formData.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from "vue";
import { Graph, Shape } from "@antv/x6/";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import insertCss from "insert-css";
export default defineComponent({
  name: "",
  setup() {
    let graph: any = null;
    const dialogTitle = ref("编辑");
    const dialogVisible = ref(false);
    // 右侧表单配置
    const rightData = reactive({
      ID: "",
      Name: ""
    });
    // 弹出框表单配置
    const formData = reactive({
      name: ""
    });
    // 节点对象
    const node = ref<any>(null);
    // 初始化画布
    const initGraph = () => {
      // #region 初始化画布
      graph = new Graph({
        container: document.getElementById("container") as HTMLElement,
        grid: true,
        autoResize: true,
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          // modifiers: 'ctrl',
          minScale: 0.5,
          maxScale: 3
        },
        connecting: {
          // router: {
          //   name: 'orth',
          //   args: {
          //     padding: 1
          //   }
          // },
          connector: {
            name: "rounded",
            args: {
              radius: 8
            }
          },
          anchor: "center",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: {
            radius: 20
          },
          createEdge() {
            return new Shape.Edge({
              connector: {
                name: "rounded",
                args: {
                  radius: 20
                }
              },
              router: {
                name: "orth"
                // args: {
                //   startDirections: ['bottom'],
                //   endDirections: ['top']
                // }
              },
              attrs: {
                line: {
                  stroke: "#A2B1C3",
                  strokeWidth: 2,
                  targetMarker: {
                    name: "block",
                    width: 12,
                    height: 8
                  }
                }
              },
              vertices: [],
              tools: {
                name: "segments",
                args: {
                  snapRadius: 20,
                  attrs: {
                    fill: "#444"
                  }
                }
              },
              zIndex: 0
            });
          },
          validateConnection({ targetMagnet }) {
            return !!targetMagnet;
          }
        },
        highlighting: {
          magnetAdsorbed: {
            name: "stroke",
            args: {
              attrs: {
                fill: "#5F95FF",
                stroke: "#5F95FF"
              }
            }
          }
        }
      });

      // #endregion

      // #region 使用插件
      graph
        .use(
          new Transform({
            resizing: true,
            rotating: true
          })
        )
        .use(
          new Selection({
            enabled: true,
            rubberband: true,
            showNodeSelectionBox: true
          })
        )
        .use(
          new Snapline({
            enabled: true
          })
        )
        .use(
          new Keyboard({
            enabled: true
          })
        )
        .use(
          new Clipboard({
            enabled: true
          })
        )
        .use(
          new History({
            enabled: true
          })
        );
      // #endregion

      // #region 初始化 stencil
      const stencil = new Stencil({
        target: graph,
        stencilGraphWidth: 200,
        stencilGraphHeight: 180,
        groups: [
          {
            title: "流程图",
            name: "group1"
          }
        ],
        layoutOptions: {
          columns: 2,
          columnWidth: 80,
          rowHeight: 55
        }
      });
      document.getElementById("stencil")?.appendChild(stencil.container);
      // #endregion

      // #region 快捷键和事件
      // 粘贴
      graph.bindKey(["ctrl+c"], () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.copy(cells);
        }
        return false;
      });
      // 剪切
      graph.bindKey(["ctrl+x"], () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.cut(cells);
        }
        return false;
      });
      // 复制
      graph.bindKey(["ctrl+v"], () => {
        if (!graph.isClipboardEmpty()) {
          const cells = graph.paste({ offset: 32 });
          graph.cleanSelection();
          graph.select(cells);
        }
        return false;
      });
      // 撤销
      graph.bindKey(["meta+z", "ctrl+z"], () => {
        if (graph.canUndo()) {
          graph.undo();
        }
        return false;
      });
      graph.bindKey(["ctrl+shift+z"], () => {
        if (graph.canRedo()) {
          graph.redo();
        }
        return false;
      });
      // 全选
      graph.bindKey(["ctrl+a"], () => {
        const nodes = graph.getNodes();
        if (nodes) {
          graph.select(nodes);
        }
      });
      // 删除
      graph.bindKey("backspace", () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.removeCells(cells);
        }
      });
      // 缩放
      graph.bindKey(["ctrl+1"], () => {
        const zoom = graph.zoom();
        if (zoom < 1.5) {
          graph.zoom(0.1);
        }
      });
      graph.bindKey(["ctrl+2"], () => {
        const zoom = graph.zoom();
        if (zoom > 0.5) {
          graph.zoom(-0.1);
        }
      });
      // 控制连接桩显示/隐藏
      const showPorts = (ports: any, show: boolean) => {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? "visible" : "hidden";
        }
      };
      graph.on("node:mouseenter", () => {
        const container = document.getElementById("container") as HTMLElement;
        const ports = container.querySelectorAll(".x6-port-body");
        showPorts(ports, true);
      });

      graph.on("node:mouseleave", () => {
        const container = document.getElementById("container") as HTMLElement;
        const ports = container.querySelectorAll(".x6-port-body");
        showPorts(ports, false);
      });
      // 双击
      graph.on("cell:dblclick", ({ cell, e }: any) => {
        dialogVisible.value = true;
        node.value = cell;
        // const isNode = cell.isNode();
        // const name = cell.isNode() ? "node-editor" : "edge-editor";
        // cell.addTools({
        //   name,
        //   args: {
        //     event: e,
        //     attrs: {
        //       backgroundColor: isNode ? "#EFF4FF" : "#FFF"
        //     }
        //   }
        // });
      });
      // 单击
      graph.on("cell:click", ({ node, e }: any) => {
        if (node) {
          rightData.ID = node.id;
          rightData.Name = node.label;
        }
      });
      // #endregion

      // #region 初始化图形
      const ports = {
        groups: {
          top: {
            position: "top",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden"
                }
              }
            }
          },
          right: {
            position: "right",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden"
                }
              }
            }
          },
          bottom: {
            position: "bottom",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden"
                }
              }
            }
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden"
                }
              }
            }
          }
        },
        items: [
          {
            group: "top"
          },
          {
            group: "right"
          },
          {
            group: "bottom"
          },
          {
            group: "left"
          }
        ]
      };
      Graph.registerNode(
        "custom-rect",
        {
          inherit: "rect",
          width: 66,
          height: 36,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF"
            },
            text: {
              fontSize: 12,
              fill: "#262626"
            }
          },
          ports: { ...ports }
        },
        true
      );
      Graph.registerNode(
        "custom-polygon",
        {
          inherit: "polygon",
          width: 66,
          height: 36,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF"
            },
            text: {
              fontSize: 12,
              fill: "#262626"
            }
          },
          ports: {
            ...ports,
            items: [
              {
                group: "top"
              },
              {
                group: "bottom"
              }
            ]
          }
        },
        true
      );
      Graph.registerNode(
        "custom-circle",
        {
          inherit: "circle",
          width: 45,
          height: 45,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF"
            },
            text: {
              fontSize: 12,
              fill: "#262626"
            }
          },
          ports: { ...ports }
        },
        true
      );
      Graph.registerNode(
        "custom-image",
        {
          inherit: "rect",
          width: 52,
          height: 52,
          markup: [
            {
              tagName: "rect",
              selector: "body"
            },
            {
              tagName: "image"
            },
            {
              tagName: "text",
              selector: "label"
            }
          ],
          attrs: {
            body: {
              stroke: "#5F95FF",
              fill: "#5F95FF"
            },
            image: {
              width: 26,
              height: 26,
              refX: 13,
              refY: 16
            },
            label: {
              refX: 3,
              refY: 2,
              textAnchor: "left",
              textVerticalAnchor: "top",
              fontSize: 12,
              fill: "#fff"
            }
          },
          ports: { ...ports }
        },
        true
      );
      const r1 = graph.createNode({
        shape: "custom-rect",
        label: "开始",
        attrs: {
          body: {
            fill: "#13c2c2",
            stroke: "#13c2c2",
            rx: 20,
            ry: 26
          }
        }
      });
      const r2 = graph.createNode({
        shape: "custom-rect",
        label: "过程",
        attrs: {
          body: {
            stroke: "#237804",
            fill: "#73d13d"
          }
        }
      });
      const r3 = graph.createNode({
        shape: "custom-rect",
        attrs: {
          body: {
            rx: 6,
            ry: 6
          }
        },
        label: "可选过程"
      });
      // const r4 = graph.createNode({
      //   shape: 'custom-polygon',
      //   width: 50,
      //   height: 50,
      //   attrs: {
      //     body: {
      //       fill: '#2ee3e3',
      //       stroke: '#13C2C2',
      //       // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
      //       // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
      //       refPoints: '0,10 10,0 20,10 10,20'
      //     }
      //   },
      //   label: '决策'
      // });
      const r5 = graph.createNode({
        shape: "custom-polygon",
        attrs: {
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
            refPoints: "10,0 40,0 30,20 0,20"
          }
        },
        label: "数据"
      });
      const r6 = graph.createNode({
        shape: "custom-circle",
        label: "连接",
        width: 50,
        height: 50,
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591"
          }
        }
      });
      stencil.load([r1, r2, r3, r5, r6], "group1");
      // #endregion

      // #region 默认流程图
      graph.fromJSON([
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          id: "58af90ff-787f-4325-a79c-0960603ad63f",
          connector: {
            name: "rounded",
            args: {
              radius: 20
            }
          },
          router: {
            name: "orth"
          },
          zIndex: 0,
          labels: [
            {
              position: {
                distance: 33
              },
              attrs: {
                label: {
                  text: "同意"
                }
              }
            }
          ],
          source: {
            cell: "f44df10f-7ce7-4002-995d-978d5dea81ff",
            port: "987ab037-78f5-4942-aeb2-b05d19c9b5d4"
          },
          target: {
            cell: "cdd2ef0c-6a49-4693-9e4a-251b3b515971",
            port: "b8c50a66-5cbb-48bb-b2c1-361fda472f8d"
          },
          tools: {
            items: [],
            name: null
          }
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          id: "60370c1a-1c08-46fe-8623-383df2025801",
          connector: {
            name: "rounded",
            args: {
              radius: 20
            }
          },
          router: {
            name: "orth"
          },
          zIndex: 0,
          labels: [
            {
              position: {
                distance: 48
              },
              attrs: {
                label: {
                  text: "驳回"
                }
              }
            }
          ],
          source: {
            cell: "83bb2a12-bec6-418c-9089-6fab59507377",
            port: "12188349-e200-45fc-8f25-79c67afa5e9d"
          },
          target: {
            cell: "c5a459de-401e-482a-bc41-f7e535c9cebf",
            port: "341b03cb-00c1-4e38-b52b-4d71a49d2233"
          },
          tools: {
            items: [],
            name: null
          }
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          id: "79ecd8bf-0d66-431e-9596-2c686c789255",
          connector: {
            name: "rounded",
            args: {
              radius: 20
            }
          },
          router: {
            name: "orth"
          },
          zIndex: 0,
          source: {
            cell: "83bb2a12-bec6-418c-9089-6fab59507377",
            port: "ad1ebada-586b-46bc-88f0-3dedbaa5f3ad"
          },
          target: {
            cell: "cc0010b7-88a4-4da3-9965-1a8fe24fd4be",
            port: "e91cb275-8c82-4375-8d06-c2f72d0bab92"
          }
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          id: "37586950-ed23-4971-a99c-3a80e3be2173",
          connector: {
            name: "rounded",
            args: {
              radius: 20
            }
          },
          router: {
            name: "orth"
          },
          zIndex: 0,
          source: {
            cell: "cdd2ef0c-6a49-4693-9e4a-251b3b515971",
            port: "ad1ebada-586b-46bc-88f0-3dedbaa5f3ad"
          },
          target: {
            cell: "83bb2a12-bec6-418c-9089-6fab59507377",
            port: "7de9e5f7-3fd4-4e32-8802-bf6af53074b7"
          }
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          id: "c2fc600d-5ecc-4043-a126-31ba5f045238",
          connector: {
            name: "rounded",
            args: {
              radius: 20
            }
          },
          router: {
            name: "orth"
          },
          zIndex: 0,
          source: {
            cell: "f4ecd10b-198e-4733-a4ae-313e3723697c",
            port: "704d0923-68ec-4f37-9e15-aa7f0b71b821"
          },
          target: {
            cell: "cdd2ef0c-6a49-4693-9e4a-251b3b515971",
            port: "7de9e5f7-3fd4-4e32-8802-bf6af53074b7"
          }
        },
        {
          position: {
            x: 418,
            y: 242
          },
          size: {
            width: 66,
            height: 36
          },
          attrs: {
            text: {
              text: "审批1"
            },
            body: {
              rx: 6,
              ry: 6
            }
          },
          visible: true,
          shape: "custom-rect",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "b8c50a66-5cbb-48bb-b2c1-361fda472f8d"
              },
              {
                group: "right",
                id: "ad1ebada-586b-46bc-88f0-3dedbaa5f3ad"
              },
              {
                group: "bottom",
                id: "12188349-e200-45fc-8f25-79c67afa5e9d"
              },
              {
                group: "left",
                id: "7de9e5f7-3fd4-4e32-8802-bf6af53074b7"
              }
            ]
          },
          id: "cdd2ef0c-6a49-4693-9e4a-251b3b515971",
          zIndex: 2,
          tools: {
            items: [],
            name: null
          }
        },
        {
          position: {
            x: 418,
            y: 120
          },
          size: {
            width: 66,
            height: 36
          },
          attrs: {
            text: {
              text: "负责人"
            },
            body: {
              stroke: "#237804",
              fill: "#73d13d"
            }
          },
          visible: true,
          shape: "custom-rect",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "341b03cb-00c1-4e38-b52b-4d71a49d2233"
              },
              {
                group: "right",
                id: "9eda57f9-6a31-4ab8-9d0f-1a3a62f2c30d"
              },
              {
                group: "bottom",
                id: "987ab037-78f5-4942-aeb2-b05d19c9b5d4"
              },
              {
                group: "left",
                id: "a2f8ea22-0ef9-43e8-afbe-74933c81ad43"
              }
            ]
          },
          id: "f44df10f-7ce7-4002-995d-978d5dea81ff",
          zIndex: 3,
          tools: {
            items: [],
            name: null
          }
        },
        {
          position: {
            x: 610,
            y: 400
          },
          size: {
            width: 66,
            height: 36
          },
          attrs: {
            text: {
              text: "过程"
            },
            body: {
              stroke: "#237804",
              fill: "#73d13d"
            }
          },
          visible: true,
          shape: "custom-rect",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "341b03cb-00c1-4e38-b52b-4d71a49d2233"
              },
              {
                group: "right",
                id: "9eda57f9-6a31-4ab8-9d0f-1a3a62f2c30d"
              },
              {
                group: "bottom",
                id: "987ab037-78f5-4942-aeb2-b05d19c9b5d4"
              },
              {
                group: "left",
                id: "a2f8ea22-0ef9-43e8-afbe-74933c81ad43"
              }
            ]
          },
          id: "c5a459de-401e-482a-bc41-f7e535c9cebf",
          zIndex: 5
        },
        {
          position: {
            x: 857,
            y: 235
          },
          size: {
            width: 50,
            height: 50
          },
          attrs: {
            text: {
              text: "连接"
            },
            body: {
              stroke: "#ffa940",
              fill: "#ffd591"
            }
          },
          visible: true,
          shape: "custom-circle",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "ee2920e1-afa4-4655-b07a-eb3d8450e5cb"
              },
              {
                group: "right",
                id: "e34da6a6-50f7-43d9-ae4a-dbea102c3189"
              },
              {
                group: "bottom",
                id: "1b1973dd-aa99-4e78-8a53-466b4d0a32e0"
              },
              {
                group: "left",
                id: "e91cb275-8c82-4375-8d06-c2f72d0bab92"
              }
            ]
          },
          id: "cc0010b7-88a4-4da3-9965-1a8fe24fd4be",
          zIndex: 6
        },
        {
          position: {
            x: 610,
            y: 242
          },
          size: {
            width: 66,
            height: 36
          },
          attrs: {
            text: {
              text: "审批2"
            },
            body: {
              rx: 6,
              ry: 6
            }
          },
          visible: true,
          shape: "custom-rect",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "b8c50a66-5cbb-48bb-b2c1-361fda472f8d"
              },
              {
                group: "right",
                id: "ad1ebada-586b-46bc-88f0-3dedbaa5f3ad"
              },
              {
                group: "bottom",
                id: "12188349-e200-45fc-8f25-79c67afa5e9d"
              },
              {
                group: "left",
                id: "7de9e5f7-3fd4-4e32-8802-bf6af53074b7"
              }
            ]
          },
          id: "83bb2a12-bec6-418c-9089-6fab59507377",
          zIndex: 7,
          tools: {
            items: [],
            name: null
          }
        },
        {
          position: {
            x: 152,
            y: 240
          },
          size: {
            width: 90,
            height: 40
          },
          attrs: {
            text: {
              text: "开始"
            },
            body: {
              stroke: "#13c2c2",
              fill: "#13c2c2",
              rx: 20,
              ry: 26
            }
          },
          visible: true,
          shape: "custom-rect",
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              },
              left: {
                position: "left",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#5F95FF",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: {
                      visibility: "hidden"
                    }
                  }
                }
              }
            },
            items: [
              {
                group: "top",
                id: "868bdc8b-604a-4605-b59a-e3ce6752618f"
              },
              {
                group: "right",
                id: "704d0923-68ec-4f37-9e15-aa7f0b71b821"
              },
              {
                group: "bottom",
                id: "0118f974-51f5-47bf-9d77-7eff093b6fa8"
              },
              {
                group: "left",
                id: "45e3beaa-fa3d-4cf7-85e4-da70e65c03a7"
              }
            ]
          },
          id: "f4ecd10b-198e-4733-a4ae-313e3723697c",
          zIndex: 8
        }
      ]);
      // #endregion
    };
    // 将流程图导出为JSON
    const toJSON = () => {
      console.log(graph.toJSON());
    };
    // 弹框确认事件
    const handle = () => {
      dialogVisible.value = false;
      const isNode = node.value.isNode();
      if (isNode) {
        node.value.label = formData.name;
      } else {
        node.value.setLabels([
          {
            attrs: { label: { text: formData.name } }
          }
        ]);
      }
    };
    onMounted(() => {
      initGraph();
      // 修改样式
      insertCss(`
    #container {
      display: flex;
      border: 1px solid #dfe3e8;
    }
    #stencil {
      width: 180px;
      height: 100%;
      position: relative;
      border-right: 1px solid #dfe3e8;
    }
    #container {
      width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
      `);
    });
    return {
      graph,
      dialogTitle,
      dialogVisible,
      rightData,
      formData,
      node,
      toJSON,
      handle
    };
  }
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
.circuit {
  height: calc(100vh - 75px);
  display: flex;

  .export {
    width: 280px;
    text-align: center;

    .ant-btn {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>
